<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品分类与信息展示</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        .navbar {
            background-color: #ff5000;
            color: white;
            padding: 10px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .navbar .logo {
            display: flex;
            align-items: center;
        }
        .navbar .logo span {
            margin-left: 10px;
        }
        .navbar a {
            color: white;
            text-decoration: none;
            margin: 0 10px;
        }
        .search-bar {
            display: flex;
            justify-content: center;
            margin: 20px 0;
        }
        .search-bar input {
            width: 500px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px 0 0 5px;
        }
        .search-bar button {
            padding: 10px;
            background-color: #ff5000;
            border: none;
            color: white;
            border-radius: 0 5px 5px 0;
        }
        .category-container {
            background-color: #f5f5f5;
            padding: 10px;
            display: flex;
        }
        .left-nav {
            width: 20%;
            background-color: #f5f5f5;
            padding: 10px;
        }
        .left-nav .category-title {
            font-size: 18px;
            margin-bottom: 10px;
        }
        .menu {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .menu .item {
            border-bottom: 1px dotted #ccc;
        }
        .menu .item h3, .menu .item h4, .menu .item h5 {
            margin: 0;
            padding: 10px;
            background-color: #fff;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .menu .item h3 a, .menu .item h4 a, .menu .item h5 a {
            text-decoration: none;
            color: #333;
        }
        .menu .item .left_nav_arrow {
            display: inline-block;
            width: 0;
            height: 0;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-top: 5px solid #333;
        }
        .menu .item .sub_category {
            display: none; /* 初始隐藏子分类 */
            background-color: #fff;
            padding-left: 20px;
        }
        .right-content {
            flex: 1;
            padding: 20px;
        }
        .product {
            background-color: #fff;
            padding: 20px;
            margin-bottom: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
            display: flex;
            align-items: center;
        }
        .product img {
            max-width: 100px;
            margin-right: 20px;
        }
        .product h3 {
            margin-top: 0;
            font-size: 20px;
        }
        .product p {
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
<div class="navbar">
    <div class="logo">机械工业</div>
    <div class="nav-links">
        <a id="index1Link" href="#">首页</a>
        <a id="userMessageLink" href="#">我的</a>
        <a id="cartLink" href="#">购物车</a>
    </div>
</div>

<div class="search-bar">
    <input type="text" id="searchInput" placeholder="搜索商品">
    <button onclick="searchProducts()">搜索</button>
</div>

<div class="category-container">
    <div class="left-nav">
        <h2 class="category-title">商品分类</h2>
        <ul class="menu" id="categoryMenu">
            <!-- 商品分类菜单将通过后端动态生成 -->
        </ul>
    </div>

    <div class="right-content" id="productContent">
        <!-- 右侧动态商品信息区域 -->
    </div>
</div>

<script>

    function getUserIdFromUrl() {
        const urlParams = new URLSearchParams(window.location.search);
        return urlParams.get('id');
    }

    const userId = getUserIdFromUrl();
    const userMessageLink = document.getElementById("userMessageLink");
    const index1Link = document.getElementById("index1Link");
    const cartLink = document.getElementById("cartLink");

    userMessageLink.href = `userMessage?id=${userId}`;
    index1Link.href = `index1?id=${userId}`;
    cartLink.href = `cart?id=${userId}`;


    document.addEventListener('DOMContentLoaded', function() {
        // 动态生成商品分类菜单
        fetch('/api/categories')  // 替换成你的后端接口路径
            .then(response => response.json())
            .then(categories => {
                const menu = document.getElementById('categoryMenu');
                categories.forEach(category => {
                    const li = document.createElement('li');
                    li.className = 'item';

                    const h3 = document.createElement('h3');
                    const a = document.createElement('a');
                    a.href = '#';  // 替换成实际链接
                    a.textContent = category.name;  // 根据实际字段获取分类名称
                    a.dataset.id = category.id;  // 存储分类ID
                    h3.appendChild(a);
                    li.appendChild(h3);

                    if (category.children && category.children.length > 0) {
                        const subCategoryDiv = document.createElement('div');
                        subCategoryDiv.className = 'sub_category';
                        subCategoryDiv.style.display = 'none';  // 初始化为隐藏
                        category.children.forEach(child => {
                            const div = document.createElement('div');
                            div.className = 'item';

                            const h4 = document.createElement('h4');
                            const childA = document.createElement('a');
                            childA.href = '#';  // 替换成实际链接
                            childA.textContent = child.name;  // 根据实际字段获取子分类名称
                            childA.dataset.id = child.id;  // 存储子分类ID
                            h4.appendChild(childA);
                            div.appendChild(h4);

                            if (child.children && child.children.length > 0) {
                                const subSubCategoryDiv = document.createElement('div');
                                subSubCategoryDiv.className = 'sub_category';
                                subSubCategoryDiv.style.display = 'none';  // 初始化为隐藏
                                child.children.forEach(grandchild => {
                                    const subDiv = document.createElement('div');
                                    subDiv.className = 'item';

                                    const h5 = document.createElement('h5');
                                    const grandchildA = document.createElement('a');
                                    grandchildA.href = '#';  // 替换成实际链接
                                    grandchildA.textContent = grandchild.name;  // 根据实际字段获取子分类名称
                                    grandchildA.dataset.id = grandchild.id;  // 存储子子分类ID
                                    h5.appendChild(grandchildA);
                                    subDiv.appendChild(h5);

                                    subSubCategoryDiv.appendChild(subDiv);
                                });
                                div.appendChild(subSubCategoryDiv);
                            }

                            subCategoryDiv.appendChild(div);
                        });
                        li.appendChild(subCategoryDiv);
                    }

                    menu.appendChild(li);
                });

                // 添加点击事件处理函数
                const items = document.querySelectorAll('.menu .item h3, .menu .item h4, .menu .item h5');
                items.forEach(function(item) {
                    item.addEventListener('click', function() {
                        const subCategory = this.nextElementSibling;
                        if (subCategory && subCategory.classList.contains('sub_category')) {
                            subCategory.style.display = subCategory.style.display === 'block' ? 'none' : 'block';
                        } else {
                            // 获取分类ID并查询商品
                            const categoryId = this.querySelector('a').dataset.id;
                            const userId = getUserIdFromUrl();
                            if (userId !== null && userId !== undefined) {
                                fetch(`/api/products/${categoryId}?userId=${userId}`)
                                    .then(response => response.json())
                                    .then(products => {
                                        // 渲染商品信息
                                        const productContent = document.getElementById('productContent');
                                        productContent.innerHTML = ''; // 清空之前的商品展示
                                        products.forEach(product => {
                                            const productDiv = document.createElement('div');
                                            productDiv.className = 'product';
                                            productDiv.innerHTML = `
                                <a href="productmessage?id=${product.id}&userId=${userId}">
                                    <img src="${product.iconUrl}" alt="${product.name}">
                                    <h3>${product.name}</h3>
                                </a>
                                <p>￥${product.price}</p>
                            `;

                                            productContent.appendChild(productDiv);
                                        });
                                    })
                                    .catch(error => {
                                        console.error('Error fetching products:', error);
                                    });
                            } else {
                                console.error('Invalid userId:', userId);
                            }
                        }
                    });
                });


            })
            .catch(error => {
                console.error('Error fetching categories:', error);
            });
    });

    function searchProducts() {
        const searchInput = document.getElementById('searchInput').value;
        const userId = getUserIdFromUrl(); // 获取用户ID的方法

        fetch(`/api/products/search?query=${searchInput}`)  // 替换成你的后端接口路径
            .then(response => response.json())
            .then(products => {
                const productContent = document.getElementById('productContent');
                productContent.innerHTML = '';  // 清空之前的商品展示
                products.forEach(product => {
                    const productDiv = document.createElement('div');
                    productDiv.className = 'product';

                    const a = document.createElement('a');
                    a.href = `productmessage?id=${product.id}&userId=${userId}`;
                    a.innerHTML = `
                        <img src="${product.imageUrl}" alt="${product.name}">
                        <h3>${product.name}</h3>
                        <p>￥${product.price}</p>
                    `;
                    productDiv.appendChild(a);

                    productContent.appendChild(productDiv);
                });
            })
            .catch(error => {
                console.error('Error searching products:', error);
            });
    }

</script>

</body>
</html>
